<template>
  <div
    class="common"
    :style="{
      background: `url(${tagsBgImg}) center center no-repeat`,
      backgroundSize: 'cover',
    }"
  >
    <Header :light-index="4" background="transparent"></Header>
    <div class="content">
      <div class="tags-wap tagcloud">
        <router-link
          href=""
          v-for="item in tags"
          :key="item.name"
          :to="{ name: 'tagsDetails', query: { id: item.name } }"
        >
          <mu-chip v-if="item.articleNum > 0" class="tag" :color="item.color"
            >{{ item.name }}({{ item.articleNum }})</mu-chip
          >
        </router-link>
      </div>
    </div>
    <Footer fixed></Footer>
  </div>
</template>
<script>
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import { randomColor } from '@/utils'
export default {
  data () {
    return {
      tagsBgImg: 'https://img1.baidu.com/it/u=1386905977,3619698088&fm=26&fmt=auto&gp=0.jpg',
      tags: [
        {
          name: "Vue",
          articleNum: 10,
          color: randomColor()
        },
        {
          name: "React",
          articleNum: 10,
          color: randomColor()
        },
        {
          name: "Node.js",
          articleNum: 10,
          color: randomColor()
        }
      ]
    }
  },
  mounted () {
    window.tagcloud({
      selector: '.tagcloud',
      fontSize: 16,
      radius: 100,
      mspeed: 'normal',
      ispeed: 'normal',
      direction: 135,
      keeep: false
    })
  },
  components: {
    Header,
    Footer
  }
}
</script>
<style lang="less" scoped>
.content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding-top: 64px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
}
.tags-wap {
  padding: 0 0.533333rem;
  min-width: 320px !important;
  .tag {
    margin-right: 0.533333rem;
    margin-bottom: 0.533333rem;
    cursor: pointer;
  }
}
</style>
